<template>
	<gracePage headerBG="#EB5D4B" statusBarBG="#EB5D4B">
		<view slot="gHeader">
			<graceHeader background="#EB5D4B" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left grace-white" style="opacity: 0;"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #FFFFFF;font-size: 30rpx;">发现</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<!-- 数据区域 -->
			<view class="grace-cate-wrap grace-space-between">
				<scroll-view scroll-y class="grace-cate-left grace-scroll-y" :style="{ height: mainHeight + 'px' }" :scroll-into-view="leftTo" style="background-color: #FFFFFF;">
					<text
						v-for="(item, index) in navItemsList"
						:key="index"
						:class="['grace-cate-left-item', currentCateIndex == item.category_id ? 'grace-cate-left-current' : '']"
						:data-cateid="item.category_id"
						@tap="changCate"
						:id="item.ids"
					>
						{{ item.category_name }}
					</text>
				</scroll-view>
				<scroll-view
					:scroll-into-view="productListTo"
					scroll-y
					class="grace-cate-right grace-scroll-y"
					:style="{ height: mainHeight + 'px' }"
					@scroll="rscroll"
					style="background-color: #F8F8F8;"
				>
					<!-- 循环输出分类名称 -->
					<view v-for="(cate, cateindex) in navItemsList" :key="cateindex" :id="'productList' + cate.category_id">
						<text class="right-cate-name">{{ cate.category_name }}</text>
						<!-- 循环对应分类下的商品 -->
						<view
							:id="'products' + product.product_id"
							:data-parentId="cate.category_id"
							class="grace-product-list grace-space-between products"
							@click.stop="gotoinfo(product.product_id)"
							v-for="(product, productIndex) in allProducts['cate' + cate.category_id + 'products']"
							:key="productIndex"
							style="background-color: #FFFFFF;"
						>
							<image class="grace-product-list-img" mode="scaleToFill" style="width: 200rpx;height: 200rpx;" :src="gRequest.apiUrlImages + product.image"></image>
							<view class="grace-product-list-body" style="margin-left: 20rpx;">
								<text class="grace-product-title content-ellipsis">{{ product.name }}</text>
								<view class="grace-nowrap grace-flex-end" style="margin-top: 40rpx;">
									<text class="grace-product-price">¥{{ product.price }}</text>
									<!-- <text class="iconfont icon-gouwuchezhengpin" style="font-size: 40rpx;color: #E14F3D;margin-right: 30rpx;"></text> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
var pageHeight = 500;
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			mainHeight: 500,
			// 左侧分类
			currentCateIndex: 0,
			// 左侧滚动定位
			leftTo: 'cate1',
			// 产品列表滚动定位
			productListTo: '',
			// 商品信息
			allProducts: [],
			navItemsList: []
		};
	},
	onReady: function() {
		uni.getSystemInfo({
			success: function(res) {
				pageHeight = res.windowHeight;
			}
		});
		setTimeout(() => {
			uni
				.createSelectorQuery()
				.select('#gBody')
				.fields({ size: true }, res => {
					this.mainHeight = res.height;
					// #ifdef H5
					this.mainHeight = res.height - 44;
					// #endif
				})
				.exec();
		}, 1000);
	},
	onLoad: function() {
		//获取商品分类接口
		this.getNavItemsList();
	},
	methods: {
		getNavItemsList: function() {
			this.gRequest.get('/product/getcategory', {}, res => {
				for(let i = 0;i < res.data.length;i++) {
					res.data[i].ids = 'cate'+res.data[i].category_id
				}
				this.setData({ navItemsList: res.data, currentCateIndex: res.data[0].category_id });
				setTimeout(() => {
					this.getGoods();
				}, 100);
			});
		},
		getGoods: function() {
			let allProducts = {};
			for (let i = 0; i < this.navItemsList.length; i++) {
				this.gRequest.get(
					'/product/productlist2',
					{
						category_id: this.navItemsList[i].category_id
					},
					res => {
						allProducts['cate' + this.navItemsList[i].category_id + 'products'] = res.data;
						if (i == this.navItemsList.length - 1) {
							this.setData({ allProducts: allProducts });
						}
					}
				);
			}
		},
		rscroll: function(e) {
			this.getIndex();
		},
		// 动态识别分类激活
		getIndex: function(i) {
			const query = uni.createSelectorQuery();
			query.selectAll('.products').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(res => {
				var products = res[0];
				for (let i = 0; i < products.length; i++) {
					if (products[i].top > 0 && products[i].top >= pageHeight / 2) {
						let cateid_str = products[i].dataset.parentid
						let cateid = cateid_str.substring(1, cateid_str.length-1)
						this.currentCateIndex = cateid
						this.leftTo = "cate"+cateid
						return;
					}
				}
			});
		},
		changCate: function(e) {
			var cateid = e.currentTarget.dataset.cateid;
			this.currentCateIndex = cateid;
			this.productListTo = 'productList' + cateid;
		},
		gotoinfo: function(e) {
			// uni.showToast({
			// 	title: '商品id ' + e
			// });
			uni.navigateTo({ url: '../productInfo/productInfo?product_id='+e });
		}
	},
	components: { gracePage, graceHeader }
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
.grace-cate-wrap {
	width: 750rpx;
}
.grace-cate-left {
	width: 200rpx;
	background-color: #f6f7f8;
}
.grace-cate-right {
	width: 540rpx;
	overflow: hidden;
}
.grace-cate-left-item {
	display: inline-flex;
	width: 100%;
	line-height: 40rpx;
	height: 40rpx;
	padding: 35rpx 0;
	font-size: 26rpx;
	justify-content: center;
}
.grace-cate-left-current {
	background-color: #eb5d4b;
	color: #ffffff;
}
.right-cate-name {
	line-height: 80rpx;
	font-size: 28rpx;
	color: #666666;
	font-weight: bold;
	display: block;
	width: 100%;
}
.grace-product-list {
	padding: 10rpx 0;
	margin-bottom: 5px;
	font-size: 0;
}
.grace-product-list-body {
	width: 355rpx;
	padding-right: 10rpx;
}
.grace-product-list-img {
	width: 150rpx;
	height: 200rpx;
}
.grace-product-title {
	line-height: 50rpx;
	font-size: 28rpx;
	display: block;
	width: 100%;
}
.grace-product-price {
	line-height: 60rpx;
	font-size: 32rpx;
	color: #ff0036;
	display: block;
	width: 100%;
}
.grace-product-btn {
	line-height: 60rpx;
	font-size: 40rpx;
	color: #ff0036;
	padding-right: 20rpx;
}
.content-ellipsis {
	display: -webkit-box; /*设置为弹性盒子*/
	-webkit-line-clamp: 2; /*最多显示x行*/
	overflow: hidden; /*超出隐藏*/
	text-overflow: ellipsis; /*超出显示为省略号*/
	-webkit-box-orient: vertical;
	color: #999;
	font-size: 24rpx;
}
</style>
